<template>
    <div class="main">
        <img class="tree" src="@/assets/img/ani-tree.png" alt="">
        <img class="java" src="@/assets//img/ani-java.png" alt="">
        <img class="huaquan" src="@/assets//img/ani-huaquan.png" alt="">
        <img class="laoren" src="@/assets//img/ani-laoren.png" alt="">
        <img class="gift" src="@/assets//img/ani-gift.png" alt="">
        <img class="php" src="@/assets//img/ani-php.png" alt="">
        <img class="qipao" src="@/assets//img/ani-qipao.png" alt="">
        <div class="line-top">
            <img src="@/assets//img/ani-line-top.png" alt="">
        </div>
        <div class="line-bottom">
            <img src="@/assets//img/ani-line-bottom.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
  name: "pcindex",
  data() {
    return {};
  },
  created() {}
};
</script>

<style scoped>
.main {
  width: 800px;
  height: 600px;
  position: relative;
}

.line-top {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  overflow-x: hidden;
  animation: from0to100 1s;
  transform: scaleX(1);
}

.line-bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30px;
  overflow-x: hidden;
  animation: from0to100 0.8s;
  transform: scaleX(1);
}

@keyframes from0to100 {
  0% {
    width: 0%;
    transform: scaleX(1);
  }
  100% {
    width: 100%;
    transform: scaleX(1);
  }
}

.tree {
  position: absolute;
  bottom: 24px;
  transform: scale(0);
  animation: trantree 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  left: 120px;
}

@keyframes trantree {
  0% {
    transform: scale(0);
    bottom: -130px;
  }
  100% {
    transform: scale(1);
    bottom: 24px;
  }
}

.java {
  position: absolute;
  bottom: 24px;
  left: 24px;
  opacity: 0;
  animation: tranjava 1s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes tranjava {
  0% {
    left: 0px;
    opacity: 0.3;
  }
  100% {
    left: 24px;
    opacity: 1;
  }
}

.php {
  position: absolute;
  bottom: 24px;
  right: 270px;
  opacity: 0;
  animation: tranphp 0.8s;
  animation-delay: 1.8s;
  animation-fill-mode: forwards;
}

@keyframes tranphp {
  0% {
    right: -100px;
    opacity: 0.3;
  }
  100% {
    right: 270px;
    opacity: 1;
  }
}

.laoren {
  position: absolute;
  bottom: 24px;
  right: 360px;
  animation: tranlaoren 1s;
  opacity: 0;
  transform: rotate(0deg);
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes tranlaoren {
  0% {
    bottom: 270px;
    opacity: 0.3;
    right: 310px;
    transform: rotate(20deg);
  }
  50% {
    bottom: 50px;
    opacity: 1;
    transform: rotate(20deg);
    right: 310px;
  }
  60% {
    bottom: 60px;
    opacity: 1;
    transform: rotate(20deg);
    right: 310px;
  }
  70% {
    bottom: 70px;
    opacity: 1;
    transform: rotate(0deg);
    right: 360px;
  }
  100% {
    bottom: 24px;
    opacity: 1;
    transform: rotate(0deg);
    right: 360px;
  }
}

.huaquan {
  position: absolute;
  bottom: 120px;
  right: 260px;
  transform: scale(0);
  animation: tranhuaquan 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes tranhuaquan {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

.gift {
  position: absolute;
  bottom: 24px;
  right: 200px;
  opacity: 0;
  animation: trangift 0.8s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes trangift {
  0% {
    bottom: 200px;
    opacity: 0.3;
  }
  100% {
    bottom: 24px;
    opacity: 1;
  }
}

.qipao {
  position: absolute;
  bottom: 300px;
  right: -100px;
  animation: tranqipao 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: rotateX(90deg) skewX(160deg);
}

@keyframes tranqipao {
  0% {
    bottom: 340px;
    right: -100px;
    transform: rotateX(90deg) skewX(160deg);
    opacity: 1;
  }
  100% {
    bottom: 300px;
    right: 0px;
    transform: rotateX(0deg) skewX(180deg);
    opacity: 1;
  }
}
</style>
